<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>Meeting会议管理系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/styles/common.css"/>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

<%--    <script src="/My97DatePicker/WdatePicker.js"></script>--%>
    <script type="text/javascript">
        $(document).ready(function () {
            var now = new Date(),
                year = now.getFullYear(),
                month = ((now.getMonth() + 1) > 9) ? (now.getMonth() + 1) : ("0" + (now.getMonth() + 1)),
                date = translate(now.getDate()),
                hour = translate(now.getHours()),
                minute = translate(now.getMinutes())

            function translate(prop) {
                if (prop <= 9) {
                    return "0" + prop;
                } else {
                    return prop
                }
            }

            var dateString = year + "-" + month + "-" + date;
            var startTimeString = hour + ":" + minute;
            var endTimeString = hour + ":" + minute;
            $('#date').val(dateString);
            $('#starttime').val(startTimeString);
            $('#endtime').val(endTimeString);
            refreshDp();
            fillEmployees($('#selDepartments').val());

        })

        function refreshDp() {
            $('#roomid').empty();
            var peopleNum = $('#numofattendents').val();
            var date = $('#date').val();
            var startTime = $('#starttime').val();
            var endTime = $('#endtime').val();
            if (peopleNum == "" || date == "" || startTime == "" || endTime == "") {
                alert("数据不能为空");
                return;
            }
            $.get({
                url: "${pageContext.request.contextPath}/judgeTime?peopleNum="+peopleNum+"&date="+date+"&startTime="+startTime+"&endTime="+endTime,
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $('#roomid').append("<option value=\""+data[i].roomID+"\">"+data[i].roomName+"</option>")
                    }
                }
            })
            // console.log(peopleNum + " " + date + " " + startTime + " " + endTime);
        }

        function fillEmployees(option) {
            $('#selEmployees').empty();
            $.get({
                url: "${pageContext.request.contextPath}/getemployee?dpId=" + option,
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $('#selEmployees').append("<option value='" + data[i].employeeId + "'>" + data[i].employeeName + "</option>")
                    }
                }
            })
        }

        function selectEmployees() {
            for (var i = 0; i < selEmployees.options.length; i++) {
                if (selEmployees.options[i].selected) {
                    addEmployee(selEmployees.options[i]);
                    selEmployees.options[i].selected = false;
                }
            }
        }

        function deSelectEmployees() {
            var elementsToRemoved = new Array();
            var options = selSelectedEmployees.options;
            for (var i = 0; i < options.length; i++) {
                if (options[i].selected) {
                    elementsToRemoved.push(options[i]);
                }
            }
            for (i = 0; i < elementsToRemoved.length; i++) {
                selSelectedEmployees.removeChild(elementsToRemoved[i]);
            }
        }

        function addEmployee(optEmployee) {
            var options = selSelectedEmployees.options;
            var i = 0;
            var insertIndex = -1;
            while (i < options.length) {
                if (optEmployee.value == options[i].value) {
                    return;
                } else if (optEmployee.value < options[i].value) {
                    insertIndex = i;
                    break;
                }
                i++;
            }
            var opt = document.createElement("option");
            opt.value = optEmployee.value;
            opt.text = optEmployee.text;
            opt.selected = true;

            if (insertIndex == -1) {
                selSelectedEmployees.appendChild(opt);
            } else {
                selSelectedEmployees.insertBefore(opt, options[insertIndex]);
            }
        }

    </script>

    <style type="text/css">
        #divfrom {
            float: left;
            width: 150px;
        }

        #divto {
            float: left;
            width: 150px;
        }

        #divoperator {
            float: left;
            width: 50px;
            padding: 60px 5px;
        }

        #divoperator input[type="button"] {
            margin: 10px 0;
        }

        #selDepartments {
            display: block;
            width: 100%;
        }

        #selEmployees {
            display: block;
            width: 100%;
            height: 200px;
        }

        #selSelectedEmployees {
            display: block;
            width: 100%;
            height: 225px;
        }
    </style>

</head>
<body>
<%@ include file="top.jsp" %>
<div class="page-body">
    <%@ include file="leftMenu.jsp" %>
    <div class="page-content">
        <div class="content-nav">
            会议预定 > 预定会议
        </div>
        <form action="${pageContext.request.contextPath}/saveMeeting" method="post">
            <fieldset>
                <legend>会议信息</legend>
                <table class="formtable">
                    <tr>
                        <td>会议名称：</td>
                        <td>
                            <input name="meetingname" type="text" id="meetingname" maxlength="20"/>
                        </td>
                    </tr>
                    <tr>
                        <td>预计参加人数：</td>
                        <td>
                            <input name="numberofparticipants" type="text" id="numofattendents" value="10" onchange="refreshDp()"/>
                        </td>
                    </tr>
                    <tr>
                        <td>会议日期：</td>
                        <td>
                            <input type="date" class="Wdate" id="date" name="time"
                                   onchange="refreshDp()">
                        </td>
                    </tr>
                    <tr>
                        <td>开始时间：</td>
                        <td>
                            <input type="time" class="Wdate" id="starttime" name="starttime"
                                   onchange="refreshDp()">
                        </td>
                    </tr>
                    <tr>
                        <td>结束时间：</td>
                        <td>
                            <input type="time" class="Wdate" id="endtime" name="endtime"
                                   onchange="refreshDp()">
                        </td>
                    </tr>
                    <%--                    <tr>--%>
                    <%--                        <td>预计开始时间：</td>--%>
                    <%--                        <td>--%>
                    <%--                            <input type="datetime-local" class="Wdate" id="starttime" name="starttime"--%>
                    <%--                                   onclick="WdatePicker({dateFmt: 'yyyy-MM-dd HH:mm:ss'})">--%>
                    <%--                        </td>--%>
                    <%--                    </tr>--%>
                    <%--                    <tr>--%>
                    <%--                        <td>预计结束时间：</td>--%>
                    <%--                        <td>--%>
                    <%--                            <input type="datetime-local" class="Wdate" id="endtime" name="endtime"--%>
                    <%--                                   onclick="WdatePicker({dateFmt: 'yyyy-MM-dd HH:mm:ss'})">--%>
                    <%--                        </td>--%>
                    <%--                    </tr>--%>
                    <tr>
                        <td>会议室名称：</td>
                        <td>
                            <select name="roomid" id="roomid">
<%--                                <c:forEach items="${meetingRoomList}" var="meetingRoom">--%>
<%--                                    <option value="${meetingRoom.roomID}">${meetingRoom.roomName}</option>--%>
<%--                                </c:forEach>--%>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>会议说明：</td>
                        <td>
                            <textarea name="description" id="description" rows="5"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td>选择参会人员：</td>
                        <td>
                            <div id="divfrom">
                                <select id="selDepartments"  onchange="fillEmployees(this.value)">
                                    <c:forEach items="${departmentList}" var="deparment">
                                        <option value="${deparment.departmentid}">${deparment.departmentname}</option>
                                    </c:forEach>
                                </select>
                                <select id="selEmployees" multiple="true">
                                </select>
                            </div>
                            <div id="divoperator">
                                <input type="button" class="clickbutton" value="&gt;" onclick="selectEmployees()"/>
                                <input type="button" class="clickbutton" value="&lt;" onclick="deSelectEmployees()"/>
                            </div>
                            <div id="divto">
                                <select name="mps" id="selSelectedEmployees" multiple="true">
                                </select>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="command" colspan="2">
                            <input type="submit" class="clickbutton" value="预定会议"/>
                            <input type="reset" class="clickbutton" value="重置"/>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </form>
    </div>
</div>
<%@include file="down.jsp" %>
</body>
</html>